import React, { Component } from 'react';
import { Layout, Menu,Image } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

import { Switch, Route ,Link,Redirect} from 'react-router-dom';

import Oderlist from "../order/orderList"
import ShopManege from "../shop/Shop"
import RoleUserList from "../role/roleUserList"
import roleList from "../role/roleList";
import orderDetai from "../order/orderDetais"
import AddYouhui from '../youhui/addyouhui'
import HuodongList from '../huodong/huodonglist'
import YouhuiList from '../youhui/youhuilist'
import AddHuodong from '../huodong/addhuodong'
import '../../assets/style/home/home.scss'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

class home extends Component {
  render() {
    return (
      <div>
        <Layout className={"home"}>
          <Header className="header">
            <div style={{color:'#ccc',float:"left",fontWeight:800,fontSize:'1.2rem'}}>同程优品后台管理系统</div>
            <div style={{ color: "white", float: "right",marginLeft:"10px" }}>xxx欢迎您!</div>
            <div className="logo">
              <Image src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2435963014,4001721141&fm=15&gp=0.jpg' id='headImage' alt="" />
            </div>
            
          </Header>
          <Layout>
            <Sider width={200} className="site-layout-background">
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                style={{ height: '100%', borderRight: 0 }}
              >
                <SubMenu key="sub1" icon={<UserOutlined />} title="商品管理">
                  <Menu.Item key="1"> <Link to="/home/shopManege" replace>商品列表</Link>
                  </Menu.Item>
                </SubMenu>
                <SubMenu key="sub2" icon={<LaptopOutlined />} title="订单管理">
                  <Menu.Item key="5"><Link to="/home/orderList" replace>订单列表</Link></Menu.Item>
                </SubMenu>
                  <SubMenu key="sub3" icon={<NotificationOutlined />} title="活动与优惠券">
                      <Menu.Item key="7"><Link to="/home/youhuilist" replace>优惠券管理</Link></Menu.Item>
                      <Menu.Item key="8"><Link to="/home/huodonglist" replace>活动管理</Link></Menu.Item>
                  </SubMenu>
                <SubMenu key="sub4" icon={<NotificationOutlined />} title="权限管理">
                  <Menu.Item key="9"><Link to="/home/roleUserList" replace>用户管理</Link></Menu.Item>
                  <Menu.Item key="10"><Link to="/home/roleList" replace>角色管理</Link></Menu.Item>
                </SubMenu>
              </Menu>
            </Sider>
            <Layout style={{ padding: '0 24px 24px' }}>
             {/*  <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>商品列表</Breadcrumb.Item>
              </Breadcrumb> */}
              <Content
                className="site-layout-background"
                style={{
                  
                  margin: 0,
                  minHeight: 280,
                  background:"#F0F2F5"
                }}
              >
                {/* 此处为二级路由 */}
                <Switch>
                  <Redirect path="/home" to="/home/shopManege" exact/> 
                  <Route path="/home/orderList" component={Oderlist} />
                  <Route path="/home/shopManege" component={ShopManege} />
                  <Route path="/home/roleUserList" component={RoleUserList} />
                  <Route path="/home/roleList" component={roleList} />
                  <Route path="/home/orderDetai" component={orderDetai} />
                  <Route path='/home/addyouhui' component={AddYouhui} />
                  <Route path='/home/addhuodong' component={AddHuodong} />
                  <Route path='/home/youhuilist' component={YouhuiList} />
                  <Route path='/home/huodonglist' component={HuodongList} />
                </Switch>
        </Content>
            </Layout>
          </Layout>
        </Layout>
      </div>
    );
  }
}

export default home;